<template>
    <div style="color: #fff;">
        导入文件
    </div>
    <div class="app-container scroll-y">
        <div class="mb-1">
            <el-input v-model="fileName" class="widthPx-150" placeholder="文件名" />
            <el-button class="ml" type="primary" @click="handleExportExcel">
                <el-icon style="vertical-align: middle">
                    <Download />
                </el-icon>
                <span style="vertical-align: middle">导出</span>
            </el-button>
        </div>

        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border highlight-current-row>
            <el-table-column align="center" label="ID" width="95">
                <template #default="scope">
                    {{ scope.$index }}
                </template>
            </el-table-column>
            <el-table-column label="银行卡">
                <template #default="scope">
                    {{ scope.row.idCard }}
                </template>
            </el-table-column>

            <el-table-column label="地址" align="center">
                <template #default="scope">
                    <span>{{ scope.row.address }}</span>
                </template>
            </el-table-column>
            <el-table-column label="用户名" align="center">
                <template #default="scope">
                    {{ scope.row.username }}
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref,unref,reactive,toRefs } from "vue";
import { Download } from "@element-plus/icons-vue";
import { aoaToSheetXlsx } from "@/utils/excel.js";
import { ElMessage } from "element-plus";
// 引入json文件
import JSONdata from "@/json/excelData.json";

const state = reactive({
  list: null,
  listLoading: true,
});

// 模拟发请求获取到数据后，赋值给list数据在视图上渲染
console.log(JSONdata.data.list)
setTimeout(()=>{
    state.list = JSONdata.data.list; // json的数据赋值
    state.listLoading = false;  // 关闭加载中
},2000)

// 导出Excel表格
const fileName = ref("");
const handleExportExcel = () => {
  if (!unref(fileName).trim()) {
    ElMessage({
      showClose: true,
      message: "请输入文件名",
      type: "warning",
    });
    return;
  }
  let table:any = unref(state.list);
  let header = ["ID", "银行卡", "地址", "用户名"];
  let data = table.map((item:any, index:number) => {
    let { idCard, address, username } = item;
    return [index, idCard, address, username];
  });
  aoaToSheetXlsx({
    data,
    header,
    filename: `${unref(fileName)}.xlsx`,
  });
};

//导出属性到页面中使用
let { list, listLoading } = toRefs(state);
</script>

<style scoped></style>